<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { Handle, Position, useVueFlow } from '@vue-flow/core'
  import { NodeResizer } from '@vue-flow/node-resizer'
  import Icon from '/@/components/Icon'
  import type { Node } from '@vue-flow/core'
  import { useRootSetting } from '/@/hooks/setting/useRootSetting'
  import { Popover } from 'ant-design-vue'
  const { getThemeColor } = useRootSetting()

  // 父级传递信息
  const props = defineProps<{
    meta: Node
  }>()
  const { getNodes, onNodeClick } = useVueFlow()
  const isNodePopVisible = ref(false)

  //
  if (props.meta.type == 'switch') {
    console.log(`props_____${props.meta.type}_____`, props)
  }

  const getShowWhichHandle = computed(() => {
    // 开始节点   发出  无接收
    if (props.meta.type === 'begin') {
      return 0
    }
    // 结束节点   接收  无发出
    if (props.meta.type === 'end' || props.meta.type === 'switch') {
      return 1
    }
    return 2
  })

  const handleNodeClick = (e: Event) => {
    console.log('自定义参数_______', props.meta)
    const cId = props.meta.id
    let cNode = getNodes.value.find((item) => item.id == cId)
    console.log(`flow提供的参数_________`, cNode)

    if (e?.target?.dataset?.handlepos == 'right') {
      console.log('点击了右侧句柄')
      isNodePopVisible.value = true
    }
  }
</script>

<template>
  <div class="node_wrap p-2" :style="meta.style" @click="handleNodeClick">
    <NodeResizer :min-height="30" />
    <Popover v-model:open="isNodePopVisible" title="Title" placement="right" trigger="click">
      <template #content>
        <div class="p-2">Content</div>
      </template>
      <Handle
        type="source"
        :position="Position.Right"
        v-if="getShowWhichHandle != 1"
        :style="{
          bottom: '10%',
          top: 'auto',
          height: '10px',
          width: '10px',
          background: getThemeColor,
        }"
      />
    </Popover>
    <Handle
      v-if="getShowWhichHandle != 0"
      type="target"
      :position="Position.Left"
      :style="{
        bottom: 'auto',
        top: '10%',
        height: '10px',
        width: '10px',
        background: getThemeColor,
      }"
    />
    <div class="box flex items-center">
      <Icon :icon="meta.data?.icon" :color="getThemeColor" :size="20" />
      <div class="node_label h-full ml-1"> {{ meta.data?.label || '节点' }}</div>
    </div>
    <slot></slot>
    <div class="node_desc pn-2 text-xs w-max-50">{{ meta.data?.desc }}</div>
  </div>
</template>
<style scoped lang="less">
  .node_wrap {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: text;

    .box {
      min-width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }

  .node_wrap:hover {
    border-color: blue !important;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 255, 0.5); /* 蓝色阴影，带偏移 */
    :deep(.vue-flow__handle) {
      width: 15px !important;
      height: 15px !important;
      text-align: center;
      font-weight: bold;
      line-height: 13px !important;
      color: white;
      border: none;
      cursor: pointer;
    }

    :deep(.vue-flow__handle)::after {
      content: '+';
    }
  }
</style>
